<template>
	<div v-if="props.info" :class="`video-item${props.screenType} ${props.determine ? 'determine' : ''}`">
		<!-- 视频 -->
		<GlobalSpin :id="props.info.id" :spinning="props.info.spinning" :warning-status="props.info.warningStatus" @error="error">
			<div class="operation">
				<video :id="`video${props.info?.id}`" class="video-item" autoplay muted></video>
				<!-- <img v-if="props.isOpenRegion && props.info?.identifyImageList" :src="props.info?.identifyImageList" class="image" /> -->
				<img v-if="props.isOpenRegion && props.info?.identifyImageList" :src="getImgUrl(props.info?.identifyImageList)" class="image" />
			</div>
		</GlobalSpin>
		<!-- 单个视频右上角操作按钮 -->
		<div v-if="!LayoutStore.triggerScreen" class="operation-button">
			<div class="button-item" @click="handleClickFullVideo">
				<span class="iconfont icon-fullscreen-line"></span>
			</div>
			<div class="button-item" @click="closeVideo">
				<span class="iconfont icon-close-line"></span>
			</div>
		</div>

		<!-- <div class="operation-time">{{ '2022:年:000' }}</div> -->

		<!-- 视频播放成功 左下角文字 -->
		<div class="operation-location">
			<div>
				<div class="location-locationName">{{ props.info?.areaLinkName }}</div>
				<div class="location-deviceName">{{ props.info?.name }}</div>
			</div>

			<div v-if="props.isShowAiNum">
				<a-tooltip>
					<template #title v-if="props.info.aiSrvCountV2 > 0">
						<ul>
							<li>【已配置算法】</li>
							<li :key="item" v-for="item in props.info.aiSrvNameStrV2.split('、')">{{ item }}</li>
						</ul>
					</template>
					<div class="ai-num">
						<img v-if="props.info.status == 0" src="@/global-assets/imgs//AI0.png" style="width: 22px; height: 14px" />
						<img v-else src="@/global-assets/imgs//AI1.png" style="width: 22px; height: 14px" />
						<p>{{ props.info.aiSrvCountV2 || 0 }}</p>
					</div>
				</a-tooltip>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="Monitoring-Center-Video">
import { appStore } from '@/global-store/index';
import { getImgUrl } from '@/global-utils/base.utils';
import { TsDeviceIdsItem } from '../../type';

type TsProps = {
	info: TsDeviceIdsItem;
	screenType: number;
	index?: number;
	determine?: boolean;
	isOpenRegion?: boolean;
	areaOrDeviceId?: number;
	isShowAiNum: boolean;
};

const props = withDefaults(defineProps<TsProps>(), {
	screenType: 1,
	isOpenRegion: false,
	index: 0,
	areaOrDeviceId: 0,
	isShowAiNum: false
});
const emits = defineEmits<{
	(e: 'full', value: any): void;
	(e: 'error', value: string): void; // 视屏报错
	(e: 'closeVideo', key: string, isRemember: boolean, inspection: boolean, areaOrDeviceId: number): void;
}>();
const { LayoutStore } = appStore;

const handleClickFullVideo = (): void => {
	emits('full', props.info);
};
const closeVideo = (): void => {
	emits('closeVideo', props.info.id, true, true, props.info.areaOrDeviceId);
};
const error = (id: string): void => {
	emits('error', id);
};
</script>

<style scoped lang="less">
@import url('../../style.less');

.image {
	position: absolute !important;
	top: 0 !important;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.ai-num {
	position: relative;
	display: flex;
	width: 40px;
	height: 16px;
	border: 1px solid #a5a9b4;
	border-radius: 8px;
	padding-left: 2px;
	background: radial-gradient(80.85% 100% at 50% 100%, rgba(221, 235, 255, 0.2) 0%, rgba(234, 243, 255, 0) 100%), #121e30;
	align-items: center;

	> p {
		position: absolute;
		top: 50%;
		right: 4px;
		font-size: 12px;
		color: #fff;
		text-shadow: 0 1px 4px rgba(2, 36, 59, 0.06);
		transform: translateY(-50%);
	}
}
</style>
